<template>
  <div>
    <!-- 新建按钮 -->
    <a-button type="primary" @click="openModal" style="position: absolute; right: 20px; top: 20px"> 新建 </a-button>

    <!-- 弹窗 -->
    <a-modal v-model:visible="showModal" :title="modalTitle" @ok="handleSubmit" class="modelCont" :width="860">
      <a-form :model="form" :rules="rules" ref="formRef" class="formData">
        <a-row>
          <a-col :span="12">
            <a-form-item label="算法名称" field="operatorName" required>
              <a-input v-model="form.operatorName" placeholder="请输入算法名称"> </a-input
            ></a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="算法Code" field="operatorMark">
              <a-input v-model="form.operatorMark" placeholder="请输入算法Code"> </a-input
            ></a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="算法类型" field="operatorRange">
              <a-select v-model="form.operatorRange" placeholder="请选择算法类型">
                <a-option v-for="item in typeList" :value="item.code" :key="item.code">{{ item.name }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="文件名称" field="operatorFileName">
              <a-input v-model="form.operatorFileName" placeholder="请输入文件名称"> </a-input
            ></a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="算子排序" field="operatorOrders">
              <a-input-number v-model="form.operatorOrders" placeholder="请输入算子排序"> </a-input-number
            ></a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="算法描述" field="operatorDescribe">
              <a-textarea v-model="form.operatorDescribe" placeholder="请输入算法描述" style="height: 120px">
              </a-textarea
            ></a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>

    <!-- 表格 -->
    <a-table :columns="columns" :data="data" row-key="id" style="margin-top: 60px" align="center">
      <template #action="{ record }">
        <div class="btnBox">
          <div class="lookBtn" @click="viewDetails(record)">详情</div>
          <div class="lookBtn" @click="deleteDetail(record)">删除</div>
        </div>
      </template>
    </a-table>
    <a-pagination
      class="mt-2 float-right"
      :total="pagination.total"
      :current="pagination.pageNum"
      :page-size="pagination.pageSize"
      @change="handlePageChange"
      @page-size-change="handlePageSizeChange"
      style="float: right; margin-right: 20px; margin-top: 20px"
    ></a-pagination>
  </div>
</template>

<script setup="">
import { ref, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { apiHome } from '@/api'

const modalTitle = ref('添加算法')
const showModal = ref(false)
const formRef = ref(null)
const form = ref({
  id: '',
  operatorName: '',
  operatorMark: '',
  operatorRange: '',
  operatorFileName: '',
  operatorDescribe: '',
  operatorOrders: ''
})
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})
const typeList = ref([])
const data = ref([])

const rules = {
  operatorName: [{ required: true, message: '算法名称是必填项' }]
}

const columns = [
  { title: 'ID', dataIndex: 'id' },
  { title: '算法名称', dataIndex: 'operatorName' },
  { title: '算法类型', dataIndex: 'operatorRange' },
  { title: '算法描述', dataIndex: 'operatorDescribe', width: 700 },
  { title: '创建时间', dataIndex: 'createTime' },
  { title: '操作', slotName: 'action' }
]

const openModal = () => {
  form.value = {
    id: '',
    operatorName: '',
    operatorMark: '',
    operatorRange: '',
    operatorFileName: '',
    operatorDescribe: '',
    operatorOrders: ''
  }
  modalTitle.value = '添加算法'
  showModal.value = true
}

const handleSubmit = () => {
  const apiMethod = form.value.id ? apiHome.putOperatorMgr : apiHome.operatorMgr
  apiMethod(form.value).then(() => {
    Message.success(form.value.id ? '修改成功' : '提交成功')
    showModal.value = false
    fetchPageList()
  })
}

const deleteDetail = (record) => {
  apiHome.deleteOperatorMgr({ id: record.id }).then(() => {
    Message.success('删除成功')
    fetchPageList()
  })
}

const viewDetails = (record) => {
  modalTitle.value = '算法详情'
  form.value = { ...record }
  showModal.value = true
}

const handlePageChange = (page) => {
  pagination.value.pageNum = page
  fetchPageList()
}

const handlePageSizeChange = (size) => {
  pagination.value.pageSize = size
  fetchPageList()
}

const fetchPageList = () => {
  apiHome.getPageList(pagination.value).then((res) => {
    pagination.value.total = Number(res.data.total)
    data.value = res.data.list
  })
}

const fetchTypeList = () => {
  apiHome.getRange().then((res) => {
    typeList.value = res.data
  })
}

onMounted(() => {
  fetchPageList()
  // fetchTypeList();
})
</script>

<style lang="less" scoped>
.lookBtn {
  color: #1d68d0;
}
.modelCont {
  width: 860px;
}
.btnBox {
  display: flex;
  div {
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>
